<div class="main-container">
  <div class="row">
    <div class="free-demo-board" fGrid="12">
      <h3 class="free-head-title">{{'CHANGE-LOG' | translate}}</h3>
      <div class="free-demo-row">
        <div style="margin-bottom: 20px;" [innerHTML]="'PUBLISH-LIFE' | translate"></div>
        <free-timeline>
          <free-timeline-item>
            <f-header>
              <h4>0.5.2<span class="title-label">2018-03-06</span></h4>
            </f-header>
            <h5 class="subtitle">Features</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v052.FEATURE' | translate"></ul>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v052.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.5.1<span class="title-label">2018-01-19</span></h4>
            </f-header>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v051.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.5.0<span class="title-label">2018-01-06</span></h4>
            </f-header>
            <h5 class="subtitle">CHANGES</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v050.CHANGES' | translate"></ul>
            <h5 class="subtitle">Refactor</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v050.REFACTOR' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.4.6<span class="title-label">2017-12-27</span></h4>
            </f-header>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v046.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.4.5<span class="title-label">2017-12-09</span></h4>
            </f-header>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v045.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.4.4<span class="title-label">2017-12-02</span></h4>
            </f-header>
            <h5 class="subtitle">Features</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v044.FEATURE' | translate"></ul>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v044.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.4.3<span class="title-label">2017-11-18</span></h4>
            </f-header>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v043.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.4.2<span class="title-label">2017-11-12</span></h4>
            </f-header>
            <h5 class="subtitle">Features</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v042.FEATURE' | translate"></ul>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v042.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.4.1<span class="title-label">2017-11-04</span></h4>
            </f-header>
            <h5 class="subtitle">Features</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v041.FEATURE' | translate"></ul>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v041.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.4.0<span class="title-label">2017-10-21</span></h4>
            </f-header>
            <h5 class="subtitle">Features</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v040.FEATURE' | translate"></ul>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v040.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.3.2 <span class="title-label">2017-10-14</span></h4>
            </f-header>
            <h5 class="subtitle">Features</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v032.FEATURE' | translate"></ul>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v032.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.3.1 <span class="title-label">2017-10-08</span></h4>
            </f-header>
            <h5 class="subtitle">Features</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v031.FEATURE' | translate"></ul>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v031.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.3.0 <span class="title-label">2017-09-30</span></h4>
            </f-header>
            <h5 class="subtitle">Features</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v030.FEATURE' | translate"></ul>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v030.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.2.5 <span class="title-label">2017-09-23</span></h4>
            </f-header>
            <h5 class="subtitle">Features</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v025.FEATURE' | translate"></ul>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v025.BUG' | translate"></ul>
            <h5 class="subtitle">Web</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v025.WEB' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.2.4 <span class="title-label">2017-09-21</span></h4>
            </f-header>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v024.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.2.3 <span class="title-label">2017-09-09</span></h4>
            </f-header>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v023.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.2.2 <span class="title-label">2017-09-08</span></h4>
            </f-header>
            <h5 class="subtitle">Features</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v022.ADD' | translate"></ul>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v022.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.2.1 <span class="title-label">2017-08-30</span></h4>
            </f-header>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v021.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.2.0 <span class="title-label">2017-08-29</span></h4>
            </f-header>
            <h5 class="subtitle">Components</h5>
            <ul class="free-ul-padding">
              <li>{{'COMPONENT.MEDIA' | translate}}</li>
              <li>{{'COMPONENT.CROPPER' | translate}}</li>
              <li>{{'COMPONENT.FLOW' | translate}}</li>
            </ul>
            <h5 class="subtitle">Features</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v020.FEATURE' | translate"></ul>
            <h5 class="subtitle">Bug Fixes</h5>
            <ul class="free-ul-padding" [innerHTML]="'UPDATE.v020.BUG' | translate"></ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.1.4 <span class="title-label">2017-08-14</span></h4>
            </f-header>
            {{'UPDATE.v014.DESCRIPTION' | translate}}
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.1.3 <span class="title-label">2017-08-13</span></h4>
            </f-header>
            <ul class="free-ul-padding">
              <li>{{'UPDATE.v013.BUG' | translate}}</li>
            </ul>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.1.2 <span class="title-label">2017-08-12</span></h4>
            </f-header>
            <free-table border="true">
              <free-table-header>
                <free-table-row>
                  <free-table-head>
                    <ng-template>{{'UPDATE.ADD' | translate}}</ng-template>
                  </free-table-head>
                  <free-table-head>
                    <ng-template>{{'UPDATE.UPDATE' | translate}}</ng-template>
                  </free-table-head>
                  <free-table-head>
                    <ng-template>{{'UPDATE.FIX' | translate}}</ng-template>
                  </free-table-head>
                </free-table-row>
              </free-table-header>
              <free-table-body>
                <free-table-row>
                  <free-table-cell>
                    <ng-template>
                      <ul class="free-ul-padding">
                        <li><a [routerLink]="['/main/colorpicker']">{{'COMPONENT.COLORPICKER' | translate}}</a></li>
                        <li><a [routerLink]="['/main/cascader']">{{'COMPONENT.CASCADER' | translate}}</a></li>
                        <li><a [routerLink]="['/main/calendar']">{{'COMPONENT.CALENDAR' | translate}}</a></li>
                        <li><a [routerLink]="['/main/datatable']">{{'COMPONENT.DATATABLE' | translate}}</a></li>
                        <li><a [routerLink]="['/main/notification']">{{'COMPONENT.NOTIFICATION' | translate}}</a></li>
                        <li><a [routerLink]="['/main/toast']">{{'COMPONENT.TOAST' | translate}}</a></li>
                        <li><a [routerLink]="['/main/editor']">{{'COMPONENT.EDITOR' | translate}}</a></li>
                        <li><a [routerLink]="['/main/timeline']">{{'COMPONENT.TIMELINE' | translate}}</a></li>
                        <li><a [routerLink]="['/main/columns']">{{'COMPONENT.COLUMN' | translate}}</a></li>
                        <li><a [routerLink]="['/main/sidenav']">{{'COMPONENT.SIDENAV' | translate}}</a></li>
                        <li><a [routerLink]="['/main/draggable']">{{'COMPONENT.DRAGGABLE' | translate}}</a></li>
                        <li><a [routerLink]="['/main/charts']">{{'COMPONENT.CHART' | translate}}</a></li>
                      </ul>
                    </ng-template>
                  </free-table-cell>
                  <free-table-cell>
                    <ng-template>
                      <ul class="free-ul-padding" [innerHTML]="'UPDATE.v012.UPDATE' | translate"></ul>
                    </ng-template>
                  </free-table-cell>
                  <free-table-cell>
                    <ng-template>
                      <ul class="free-ul-padding" [innerHTML]="'UPDATE.v012.FIX' | translate"></ul>
                    </ng-template>
                  </free-table-cell>
                </free-table-row>
              </free-table-body>
            </free-table>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.1.1 <span class="title-label">2017-07-08</span></h4>
            </f-header>
            <free-table border="true">
              <free-table-header>
                <free-table-row>
                  <free-table-head>
                    <ng-template>{{'UPDATE.ADD' | translate}}</ng-template>
                  </free-table-head>
                  <free-table-head>
                    <ng-template>{{'UPDATE.FIX' | translate}}</ng-template>
                  </free-table-head>
                </free-table-row>
              </free-table-header>
              <free-table-body>
                <free-table-row>
                  <free-table-cell>
                    <ng-template>
                      <ul class="free-ul-padding">
                        <li><a [routerLink]="['/main/slide']">{{'COMPONENT.SLIDE' | translate}}</a></li>
                        <li><a [routerLink]="['/main/chip']">{{'COMPONENT.CHIP' | translate}}</a></li>
                        <li><a [routerLink]="['/main/shrink']">{{'COMPONENT.SHRINK' | translate}}</a></li>
                        <li><a [routerLink]="['/main/select']">{{'COMPONENT.SELECT' | translate}}</a></li>
                        <li><a [routerLink]="['/main/pagination']">{{'COMPONENT.PAGINATION' | translate}}</a></li>
                        <li><a [routerLink]="['/main/contextmenu']">{{'COMPONENT.CONTEXTMENU' | translate}}</a></li>
                        <li>{{'COMPONENT.PARTICLE' | translate}}</li>
                      </ul>
                    </ng-template>
                  </free-table-cell>
                  <free-table-cell>
                    <ng-template>
                      <ul class="free-ul-padding">
                        <li>
                          <a [routerLink]="['/main/input']">{{'COMPONENT.INPUTTEXT' | translate}}</a>
                          {{'UPDATE.v011.CHANGE.INPUTTEXT' | translate}}
                        </li>
                        <li>
                          <p><a [routerLink]="['/main/dropdown']">{{'COMPONENT.DROPDOWN' | translate}}</a></p>
                          <div [innerHTML]="'UPDATE.v011.CHANGE.DROPDOWN' | translate"></div>
                        </li>
                        <li>
                          <p><a [routerLink]="['/main/modals']">{{'COMPONENT.MODAL' | translate}}</a></p>
                          <div [innerHTML]="'UPDATE.v011.CHANGE.MODAL' | translate"></div>
                        </li>
                      </ul>
                    </ng-template>
                  </free-table-cell>
                </free-table-row>
              </free-table-body>
            </free-table>
          </free-timeline-item>
          <free-timeline-item>
            <f-header>
              <h4>0.1.0 <span class="title-label">2017-05-21</span></h4>
            </f-header>
            <free-table border="true">
              <free-table-header>
                <free-table-row>
                  <free-table-head>
                    <ng-template>{{'UI-ELEMENT' | translate}}</ng-template>
                  </free-table-head>
                  <free-table-head>
                    <ng-template>{{'BASIC-COMPONENT' | translate}}</ng-template>
                  </free-table-head>
                  <free-table-head>
                    <ng-template>{{'EXTENDED-COMPONENT' | translate}}</ng-template>
                  </free-table-head>
                  <free-table-head>
                    <ng-template>{{'PAGE' | translate}}</ng-template>
                  </free-table-head>
                </free-table-row>
              </free-table-header>
              <free-table-body>
                <free-table-row>
                  <free-table-cell>
                    <ng-template>
                      <ul class="free-ul-padding">
                        <li>{{'COMPONENT.GRID' | translate}}</li>
                        <li>{{'COMPONENT.IMAGE' | translate}}</li>
                        <li>{{'COMPONENT.TYPOGRAPHY' | translate}}</li>
                        <li>{{'COMPONENT.SHADOW' | translate}}</li>
                      </ul>
                    </ng-template>
                  </free-table-cell>
                  <free-table-cell>
                    <ng-template>
                      <ul class="free-ul-padding">
                        <li>{{'COMPONENT.BUTTON' | translate}}</li>
                        <li>{{'COMPONENT.LIST' | translate}}</li>
                        <li>{{'COMPONENT.CARD' | translate}}</li>
                        <li>{{'COMPONENT.PROGRESS' | translate}}</li>
                        <li>{{'COMPONENT.LOADING' | translate}}</li>
                        <li>{{'COMPONENT.INPUTTEXT' | translate}}</li>
                        <li>{{'COMPONENT.CHECKBOX' | translate}}</li>
                        <li>{{'COMPONENT.RADIO' | translate}}</li>
                        <li>{{'COMPONENT.SWITCH' | translate}}</li>
                        <li>{{'COMPONENT.BREADCRUMB' | translate}}</li>
                        <li>{{'COMPONENT.ICON' | translate}}</li>
                        <li>{{'COMPONENT.BADGE' | translate}}</li>
                      </ul>
                    </ng-template>
                  </free-table-cell>
                  <free-table-cell>
                    <ng-template>
                      <ul class="free-ul-padding">
                        <li>{{'COMPONENT.ACCORDION' | translate}}</li>
                        <li>{{'COMPONENT.TAB' | translate}}</li>
                        <li>{{'COMPONENT.GRID' | translate}}MODAL</li>
                        <li>{{'COMPONENT.TOOLTIP' | translate}}</li>
                        <li>{{'COMPONENT.SPINNER' | translate}}</li>
                        <li>{{'COMPONENT.RATING' | translate}}</li>
                        <li>{{'COMPONENT.DROPDOWN' | translate}}</li>
                        <li>{{'COMPONENT.TABLE' | translate}}</li>
                        <li>{{'COMPONENT.TREE' | translate}}</li>
                      </ul>
                    </ng-template>
                  </free-table-cell>
                  <free-table-cell>
                    <ng-template>
                      <ul class="free-ul-padding">
                        <li>{{'COMPONENT.LOGIN' | translate}}</li>
                        <li>{{'COMPONENT.PAGE404' | translate}}</li>
                      </ul>
                    </ng-template>
                  </free-table-cell>
                </free-table-row>
              </free-table-body>
            </free-table>
          </free-timeline-item>
        </free-timeline>
      </div>
    </div>
  </div>
</div>
